<template>
  <div class="ad-pusher">
    <div class="back">
      <a @click="$router.go(-1)"><i class="el-icon-d-arrow-left "></i></a>
    </div>
    <div class="content" v-loading="loading">
      <el-row :gutter="12">
        <el-col :span="12">
          <el-card>
            <p class="tip">IDFA 广告推送</p>
            <el-input v-model="idfa" style="width:70%;margin-right:20px;" placeholder="请输入相应的IDFA"></el-input>
            <el-button @click="handleIdfaPush" type="primary">广告推送</el-button>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <p class="tip">IMEI 广告推送</p>
            <el-input v-model="imei" style="width:70%;margin-right:20px;" placeholder="请输入相应的IMEI"></el-input>
            <el-button v-model="imei" @click="handleImeiPush" type="primary">广告推送</el-button>
          </el-card>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="12">
        <el-col :span="12">
          <el-card>
            <div class="faq-content">
              <p class="question">为什么要获取 IDFA ？</p>
              <div class="answer">
                为了标识一台移动终端的唯一性，Android和iOS系统分别采用了不同的标准。当前在移动数字广告领域内较为通行的做法是：<br>
                Android - IMEI <br>
                iOS - IDFA <br>
                通过获取唯一标识信息，移动广告可以进行有效的用户识别与广告定投，在一定程度上提高用户识别精准性，并提升广告可见性。 <br>
              </div>
              <p class="question">什么是IDFA ？</p>
              <div class="answer">
                • IDFA 是专用于苹果设备的广告标示符，例如： <span class="point"> 29D89780-E396-4EAF-93B0-D34E5573529D</span> <br>

                • 该标示符无法直接查看，需要下载工具；<br>

                • 该项设定在 <span class="point"> 设置>隐私>广告 </span>，一般来说用户比较少去关心这些设定；<br>

                具体请参考下列图片：
              </div>
              <div class="img-box">
                <img src="../../static/image/idfa1.png" alt="IDFA 演示图片">
              </div>
              <p class="question">如何获取iOS设备的IDFA ？</p>
              <div class="answer">
                需要通过 App Store 下载专用的读取IDFA的应用，推荐工具 <span class="point">YourIDFA</span> 该工具短小精悍，可重复读取及复制分享。
                如需下载，请扫描下面的二维码 ，并按照相应步骤操作
              </div>
              <div class="img-box">
                <img src="../../static/image/idfa2.png" alt="IDFA 演示图片">
                <img src="../../static/image/idfa3.png" alt="IDFA 演示图片">
                <img src="../../static/image/idfa4.png" alt="IDFA 演示图片">
                <img src="../../static/image/idfa5.png" alt="IDFA 演示图片">
                <img src="../../static/image/idfa6.png" alt="IDFA 演示图片">
              </div>
              <p class="question">注意 ： </p>
              <div class="answer">
                <span class="point">由于 原生信息流广告的一些特性，诸如媒体的某些广告位当日被包量，以及原生信息流的缓存可能导致竞价成功的广告无法获得及时的展示，即使我们使用了IMEI/IDFA精准定向，被定向的设备也不一定能高概率的看到广告</span>。
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div class="faq-content">
              <p class="question">为什么要获取 IMEI ？</p>
              <div class="answer">
                为了标识一台移动终端的唯一性，Android和iOS系统分别采用了不同的标准。当前在移动数字广告领域内较为通行的做法是：<br>
                Android - IMEI <br>
                iOS - IDFA <br>
                通过获取唯一标识信息，移动广告可以进行有效的用户识别与广告定投，在一定程度上提高用户识别精准性，并提升广告可见性。 <br>
              </div>
              <p class="question">如何获取IMEI？</p>
              <div class="answer">
                • 获取IMEI 方法较为简便， 在手机电话拨号盘上输入 <span class="point">*#06#</span> 即可获得该设备的IMEI号码；<br>

                • 该号码为15位连续的十进制数字，例如 <span class="point"> 867982021807376</span><br>

                • 可以通过截屏后发送或分享 <br>
              </div>
              <div class="img-box">
                <img src="../../static/image/imei1.png" alt="IMEI 演示图">
              </div>
              <p class="question">注意 ： </p>
              <div class="answer">
                 <span class="point">由于 原生信息流广告的一些特性，诸如媒体的某些广告位当日被包量，以及原生信息流的缓存可能导致竞价成功的广告无法获得及时的展示，即使我们使用了IMEI/IDFA精准定向，被定向的设备也不一定能高概率的看到广告</span>。
              </div>

            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {normalGet} from "../../methods2";

  let remoteHost = 'http://api.gdyunlifang.com',
    xiaofengHost = 'http://192.168.0.250',
    host = remoteHost,
    submitUrl = {
      md5: host + '/ad/append/imei/md5/',
      imei: host + '/ad/append/imei/',
      idfa: host + '/ad/append/idfa/',
    };

  export default {
    name: "ad-pusher",
    data() {
      return {
        idfa: '',
        imei: '',
        loading: false,
      }
    },
    methods: {
      handleIdfaPush() {
        let idfa = this.idfa.trim(),
            idfaReg = /([0-9a-zA-Z]{1,})(([/\s-][0-9a-zA-Z]{1,}){4})$/,

            suc = (data) => {
              this.$message.success('广告推送成功')
            },
            err = () => {
              this.$message.warning('广告推送失败，可能是网络有过高的延时...');
            },
            always = () => {
              this.loading = false;
            };

        if (!idfaReg.test(idfa)) {
          this.$message.warning('输入的 IDFA 格式不正确');
          return;
        }

        this.loading = true;
        normalGet(submitUrl['idfa'] + idfa, '', suc, err, this.$message, always);
      },
      handleImeiPush() {
        let imei = this.imei.trim(),
            imeiReg = /^[0-9]*$/,

            suc = (data) => {
              this.$message.success('广告推送成功')
            },
            err = () => {
              this.$message.warning('广告推送失败，可能是网络有过高的延时...');
            },
            always = () => {
              this.loading = false;
            };

        if (!imeiReg.test(imei) && imei.length !== 15) {
          this.$message.warning('输入的 IMEI 格式不正确');
          return;
        }

        this.loading = true;
        normalGet(submitUrl['imei'] + imei, '', suc, err, this.$message, always);
      },

    }
  }
</script>

<style scoped lang="scss">
  @import "../../static/style/public";

  .ad-pusher {
    .back {
      @include flexCenter;
      position: fixed;
      left: 0px;
      top: 0px;
      padding: 0 20px;
      width: 50px;
      height: 100%;
      i {
        font-size: 5rem;
        font-weight: 600;
        color: #50bfff;

        &:hover {
          cursor: pointer;
        }
      }
    }
    .tip {
      padding: 8px 16px;
      background-color: #ecf8ff;
      border-radius: 4px;
      border-left: 5px solid #50bfff;
      margin: 20px 0;
      font-size: 24px
    }
    .content {
      margin-top: 50px;
    }

    .faq-content {
      width: 100%;
      height: 800px;
      overflow: auto;
      .question {
        font-size: 20px;
        font-weight: 550;
        color: #4b91ff;
      }
      .answer {
        font-size: 17px;
        font-weight: 510;
        line-height: 30px;
      }
      .point {
        font-weight: 550;
        color: #ff997f;
      }
      .img-box {
        display: flex;
        flex-direction: column;
        width: 100%;
        img {
          width: 100%;

        }
      }
    }

  }
</style>
